<html>
<head>
    <title>Rise Player Configuration</title>
    <style type="text/css">
	    .section{
	        border: 1px solid black;
	        display: table;
	        margin: 5px;
	        padding:5px;
	    }
    </style>
    <script type="text/javascript">
    
        var cacheApi = "http://localhost:9494/";
        var playerApi = "http://localhost:9449/";

        function load() {
            resetStatus();
            var server = "[SERVER]";
            var serverUrl = "[SERVER_URL]";
            if (server == "test") {
                document.getElementById("rbTest").checked = true;
            } else if (server == "url") {
                document.getElementById("rbURL").checked = true;
            } else {
                document.getElementById("rbProduction").checked = true;
            }
            document.getElementById("tbServerUrl").value = serverUrl;
        }

        function save() {
            var server = "production";
            var serverUrlParam = ""
            if (document.getElementById("rbProduction").checked) {
                server = "production";
            } else if (document.getElementById("rbTest").checked) {
                server = "test";
            } else if (document.getElementById("rbURL").checked) {
                server = "url";
                serverUrl = document.getElementById("tbServerUrl").value;
                if (serverUrl) {
                    var serverUrlParam = "&server_url=" + encodeURIComponent(serverUrl);
                }
            }
            var displayId = document.getElementById("displayId").value;
            var claimId = document.getElementById("claimId").value;

            call_url(playerApi + "save_property?restart_viewer=true&display_id=" + displayId + "&claim_id=" + claimId + "&server=" + server + serverUrlParam);
        }

        function reset() {
            call_url(playerApi + "clear");
        }

        function reboot() {
            call_url(playerApi + "reboot");
        }

        function clear_cache() {
            call_url(cacheApi + "clear_cache");
        }

        function get_cached_files() {
            var json = call_url(cacheApi + "get_cached_files");
            var items = JSON.parse(json);
            if (items) {
                document.getElementById("divCahedFiles").innerHTML = arrayToHtmlTable(items);
            } else {
                document.getElementById("divCahedFiles").innerHTML = "cache is empty";
            }
        }

        function call_url(url) {
            resetStatus();

            var xhr = new XMLHttpRequest();
            xhr.onload = onSuccess;
            xhr.onerror = onFailure;
            xhr.onError = onSuccess;
            xhr.open("GET", url, false); //IMPORTANT! synchronous request
            xhr.send();
            return xhr.responseText;

        }

        function onSuccess(xhrProgressEvent) {
            var xhr = xhrProgressEvent.target;
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("statusOK").style.display = "block";
                } else {
                    document.getElementById("statusError").style.display = "block";
                }
            }
        }

        function onFailure() {
            document.getElementById("statusError").style.display = "block";
        }

        function resetStatus() {
            document.getElementById("statusOK").style.display = "none";
            document.getElementById("statusError").style.display = "none";
        }
        
        function arrayToHtmlTable(items) {
            res = "<table border='1' cellpadding='3'>" +
            "<tr><th></th><th>File Name</th><th align='right'>Size</th></tr>";
            for ( var i = 0; i < items.length; i++) {
                res += "<tr>" +
                "<td>" + (i+1) + "</td>" +
                "<td>" + items[i].name + "</td>" +
                "<td align='right'>" + items[i].size + "</td>" +
                "</tr>";
            }
            res += "</table>";            
            console.log(res);
            return res;
        }

    </script>
</head>
<body style="margin: 0px;" onload="load()">
    <h1>
        Rise Player Configuration</h1>
    <div id="statusOK" style="background-color:#0CFF0C; width:200px; text-align:center; display:none;">Success</div>
    <div id="statusError" style="background-color:Red; width:200px; text-align:center; display:none;">Failure</div>
    <div class="section">
    <table cellpadding="5" cellspacing="0">
        <tr>
            <td>
                Display ID:
            </td>
            <td>
                <input id="displayId" type="text" value="[DISPLAY_ID]" />
            </td>
        </tr>
        <tr>
            <td>
                Claim ID:
            </td>
            <td>
                <input  id="claimId" type="text" value="[CLAIM_ID]" />
            </td>
        </tr>
        <tr>
            <td valign="top">
                Server:
            </td>
            <td>
                <input id="rbProduction" type="radio" name="server" value="Production" checked="checked" />Production<br />
                <input id="rbTest" type="radio" name="server" value="Test" />Test<br />
                <input id="rbURL" type="radio" name="server" value="URL" />URL:
                <input id="tbServerUrl" type="text" value="" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td style="padding-top:10px">
            <button onclick="save()">Apply</button>
            <button onclick="reset()">Reset Settings</button>
            <button onclick="reboot()">Restart Player</button><br>
            </td>
        </tr>
    </table>
    </div>
    <div class="section">
        <h2>Cache</h2>
        <button onclick="get_cached_files()">Show Cached Files</button>
        <button onclick="clear_cache()">Clear Cache</button>
        <div id="divCahedFiles"></div>
    </div>
    
</body>
</html>
